<template>
  <div class="layui-layout layui-layout-admin zlgj-page" >
    <div class="adminnav2">
     <Secondnav urlname="yhqtj"></Secondnav>
    </div>
    <div class="viewport01"></div>
      <div class="layui-body kedou-admin" id="LAY_app_body">
        <div class="layui-fluid">
          <div class="layui-row layui-col-space15">
             <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                  <div class="layui-card-header">浏览次数</div>
                  <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">669</p>
                  </div>
                </div>
              </div>
              <div class="layui-col-sm6 layui-col-md3">
                 <div class="layui-card">
                   <div class="layui-card-header"> 领取量</div>
                   <div class="layui-card-body layuiadmin-card-list">
                     <p class="layuiadmin-big-font">1819</p>
                   </div>
                 </div>
               </div>
               <div class="layui-col-sm6 layui-col-md3">
                  <div class="layui-card">
                    <div class="layui-card-header"> 使用量</div>
                    <div class="layui-card-body layuiadmin-card-list">
                      <p class="layuiadmin-big-font">193</p>
                    </div>
                  </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                   <div class="layui-card">
                     <div class="layui-card-header"> 转增次数</div>
                     <div class="layui-card-body layuiadmin-card-list">
                       <p class="layuiadmin-big-font">56</p>
                     </div>
                   </div>
                </div>
          </div>
        </div>
        <div class="layui-fluid" style="margin-top:-15px;">
           <div class="layui-card">
             <div class="layui-card-header">数据概况(一周内)</div>
             <div class="layui-card-body">
              <table class="layui-table">
              <thead>
                <tr>
                  <th>时间</th>
                  <th>卡券名称</th>
                  <th>浏览次数</th>
                  <th>领取量</th>
                  <th>使用量</th>
                  <th>转赠次数	</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>2020-05-05</td>
                  <td>10</td>
                  <td>33</td>
                  <td>2121</td>
                  <td>120</td>
                  <td>9070</td>
                </tr>
                <tr>
                  <td>2020-05-04</td>
                  <td>20</td>
                  <td>30</td>
                  <td>2000</td>
                  <td>100</td>
                  <td>9000</td>
                </tr>
                <tr>
                  <td>2020-05-03</td>
                  <td>11</td>
                  <td>31</td>
                  <td>2020</td>
                  <td>1100</td>
                  <td>200</td>
                </tr>
                <tr>
                  <td>2020-05-02</td>
                  <td>55</td>
                  <td>31</td>
                  <td>2010</td>
                  <td>100</td>
                  <td>9024</td>
                </tr>
                <tr>
                  <td>2020-05-01</td>
                  <td>51</td>
                  <td>30</td>
                  <td>2002</td>
                  <td>130</td>
                  <td>9100</td>
                </tr>
              </tbody>
            </table>
             </div>
           </div>
        </div>
        <div class="layui-fluid" style="margin-top:-15px;">
          <div class="layui-card">
            <div class="layui-card-header">当天访问统计</div>
            <div class="layui-card-body">
              <div id="btb01" style="height:400px"></div>
            </div>
          </div>
        </div>
        <div class="layui-fluid" style="margin-top:-15px;">
          <div class="layui-card">
            <div class="layui-card-header">当天领取量统计</div>
            <div class="layui-card-body">
              <div id="btb02" style="height:400px"></div>
            </div>
          </div>
        </div>
        <div class="layui-fluid" style="margin-top:-15px;">
          <div class="layui-card">
            <div class="layui-card-header">当天使用量统计</div>
            <div class="layui-card-body">
              <div id="btb03" style="height:400px"></div>
            </div>
          </div>
        </div>
  		</div>	　
  </div>
</template>
<script>
  import echarts from 'echarts'
  import Pagetop from '../common/pagetop.vue'
  import Secondnav from '../common/zlgjsecondnav.vue'
export default {
  name: 'kehu',
  components: {Pagetop,Secondnav},
  data () {
    return {

    }
  },
  mounted(){
    this.getbtb01();
    this.getbtb02();
    this.getbtb03();
  },
  methods: {
    getbtb01:function(){
      var option={
        backgroundColor:'rgba(255, 255, 255, 0)',
				xAxis:{
					type: "category",
					boundaryGap: !1,
					data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"],
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          }
				},
				yAxis: {
					type: "value",
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          }
				},
				series: [{
					name: "销售额",
					type: "line",
					smooth: !0,
					itemStyle: {
						normal: {
							areaStyle: {
								type: "default"
							}
						}
					},
					data: [211, 222, 333, 444, 555, 666, 3233, 33333, 555, 66686, 13333, 3323, 6666, 11888, 26666, 38888, 56666, 42222, 39999, 28888, 17777, 9666, 6555, 5555, 3333, 2222, 111, 699, 5888, 277, 1666, 1999, 858, 5377]
				}]
			}
      var myChart = echarts.init(document.getElementById('btb01'))
      myChart.setOption(option);
    },
    getbtb02:function(){
      var option={
        backgroundColor:'rgba(255, 255, 255, 0)',
    		xAxis:{
    			type: "category",
    			boundaryGap: !1,
    			data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"],
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          }
    		},
    		yAxis: {
    			type: "value",
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          }
    		},
    		series: [{
    			name: "销售额",
    			type: "line",
    			smooth: !0,
    			itemStyle: {
    				normal: {
    					areaStyle: {
    						type: "default",
                color:'#b0c5e4'
    					},
              lineStyle:{
                  color:'#b0c5e4'
              }
    				}
    			},
    			data: [10, 20, 50, 444, 55, 666, 333, 3333, 5555, 666, 333, 333, 6666, 11858, 26666, 38888, 56166, 42222, 3999, 28888, 17777, 2666, 655, 5555, 3333, 222, 3111, 699, 5888, 2777, 1666, 99, 888, 77]
    		}]
    	}
      var myChart = echarts.init(document.getElementById('btb02'))
      myChart.setOption(option);
    },
    getbtb03:function(){
      var option={
        backgroundColor:'rgba(255, 255, 255, 0)',
    		xAxis:{
    			type: "category",
    			boundaryGap: !1,
    			data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"],
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          }
    		},
    		yAxis: {
    			type: "value",
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          }
    		},
    		series: [{
    			name: "销售额",
    			type: "line",
    			smooth: !0,
    			itemStyle: {
    				normal: {
    					areaStyle: {
    						type: "default",
    					  color:'#09c5ce'
    					},
    					lineStyle:{
    					    color:'#09c5ce'
    					}
    				}
    			},
    			data: [111, 212, 323, 444, 551, 266, 3313, 3333, 5555, 66676, 33433, 3233, 666, 1188, 2666, 38888, 56666, 42222, 39999, 28888, 17777, 9666, 6555, 5555, 3333, 2222, 3111, 699, 588, 277, 1666, 999, 888, 777]
    		}]
    	}
      var myChart = echarts.init(document.getElementById('btb03'))
      myChart.setOption(option);
    },
  },
  updated:function(){

  },
}
</script>
<style>
  @import '../../../static/other/css/zlgj/index.css'
</style>
